<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@page import="beans.*"%>
<%@page import="service.*"%>
<%@page import="java.util.*"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Dashboard</title>
<link rel="stylesheet"
	href="https://unpkg.com/mdui@1.0.2/dist/css/mdui.min.css" />
<title>Document</title>
<style>
body {
	background-color: #f5f5f5;
	font-family: Arial, sans-serif;
}

#m{
	position: absolute;
	top: 55%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 1px solid #ccc;
	width: 800px;
	padding: 20px;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
	font-size: 20px;
}

label {
	display: inline-block;
	width: 200px;
	margin-bottom: 10px;
	font-weight: bold;
}

#ks,#mz {
	width: 500px;
	border-radius: 10px;
	padding: 10px;
	border: none;
	background-color: #f2f2f2;
	margin-bottom: 10px;
	font-size: 16px;
}

input[type="submit"] {
	background-color: #4CAF50;
	border: none;
	color: #fff;
	padding: 10px 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	border-radius: 10px;
	cursor: pointer;
}
input[type="button"]{
	background-color: #4CAF50;
	border: none;
	color: #fff;
	padding: 10px 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	border-radius: 10px;
	cursor: pointer;
}
input[type="submit"]:hover {
	background-color: #3e8e41;
}
#r {
	background-color: #f44336;
}
#r:hover{
background-color: #d32f2f;
}
input[type="button"]:hover {
	background-color: #3e8e41;
}
table {
	border-collapse: collapse;
	width: 100%;
	margin-top: 20px;
	font-size: 16px;
}

table th, table td {
	border: 1px solid #ddd;
	padding: 8px;
	text-align: center;
}

table th {
	background-color: #f2f2f2;
	font-weight: bold;
}


        .pager {
            text-align: center;
            margin-top: 10px;
        }

        .pager a {
            display: inline-block;
            padding: 5px 10px;
            margin-right: 5px;
            text-decoration: none;
            border: 1px solid #ccc;
            background-color: #f2f2f2;
            color: #333;
        }

        .pager a.active {
            background-color: #ccc;
        }
        #page-size{
        width: 70px;
	border-radius: 10px;
	padding: 10px;
	border: none;
	background-color: #f2f2f2;
	margin-bottom: 10px;
	font-size: 16px;
        }
        .hidden-column {
    display: none;
}
#modal{

            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;

        }
#c,#u{
display:none;
}
#ca,#ua{
position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background-color: rgba(0, 0, 0, 0.5);
            
}
#cb{
margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 135px;
	width: 350px;
	background-color: white;
	text-align:center;
	border-radius: 10px;
         
}
#ub{
margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height:310px;
	width: 780px;
	background-color: white;
	text-align:center;
	border-radius: 10px;

}
#ub > select{
	width: 500px;
	border-radius: 10px;
	padding: 10px;
	border: none;
	background-color: #f2f2f2;
	margin-bottom: 10px;
	font-size: 16px;
}
input[type="text"]{
	width: 480px;
	border-radius: 10px;
	padding: 10px;
	border: none;
	background-color: #f2f2f2;
	margin-bottom: 10px;
	font-size: 16px;
}

input[type="date"] {
	width: 470px;
	border-radius: 10px;
	padding: 16px;
	border: none;
	background-color: #f2f2f2;
	margin-bottom: 10px;
}
tr:hover {
      background-color: #eaeaea;
    }
</style>
<%doctorSchedulingService doctorSchedulingService = new doctorSchedulingService();
%>
</head>
<body class="mdui-theme-primary-teal mdui-theme-accent-teal mdui-drawer-body-left" >



<div class=".mdui-ripple">
    <div class="mdui-toolbar mdui-color-theme">
        <a href="javascript:;" class="mdui-btn mdui-btn-icon">
            <i class="mdui-icon material-icons " id="toggle">menu</i>
        </a>
        <span class="mdui-typo-title">Dashboard</span>
        <div class="mdui-toolbar-spacer"></div>
        <div class="mdui-textfield mdui-textfield-expandable mdui-float-right">
            <button class="mdui-textfield-icon mdui-btn mdui-btn-icon" onclick="searchText()"><i class="mdui-icon material-icons">search</i></button>
            <input id="searchText" class="mdui-textfield-input" type="text" placeholder="Search"/>
            <button class="mdui-textfield-close mdui-btn mdui-btn-icon" ><i class="mdui-icon material-icons">close</i></button>
        </div>
       <a href="javascript:;" class="mdui-btn mdui-btn-icon" onclick="window.location='${pageContext.request.contextPath}/main.jsp'">
            <i class="mdui-icon material-icons">&#xe879;</i>
        </a>
        
    </div>
</div>


<div class="mdui-drawer" id="drawer">
    <ul class="mdui-list">
        <li class="mdui-subheader">医院仪表盘</li>
        <li class="mdui-list-item mdui-ripple" onclick="window.location='${pageContext.request.contextPath}/admin/index.jsp'">
            <i class="mdui-icon material-icons mdui-list-item-icon">&#xe871;</i>
            <div class="mdui-list-item-content">Dashboard</div>
        </li>
        <li class="mdui-subheader" >人员管理</li>
        <li class="mdui-list-item mdui-ripple" onclick="window.location='${pageContext.request.contextPath}/Main_Patient'">
            <i class="mdui-icon material-icons mdui-list-item-icon">&#xe914;</i>
            <div class="mdui-list-item-content">患者信息管理</div>
        </li>
        <li class="mdui-list-item mdui-ripple" onclick="window.location='${pageContext.request.contextPath}/Main_Doctor'">
            <i class="mdui-icon material-icons mdui-list-item-icon">&#xe566;</i>
            <div class="mdui-list-item-content">医生信息管理</div>
        </li>
        <li class="mdui-list-item mdui-ripple" onclick="window.location='${pageContext.request.contextPath}/Main_Admin'">
            <i class="mdui-list-item-icon mdui-icon material-icons">&#xe8b8;</i>
            <div class="mdui-list-item-content">管理员信息管理</div>
        </li>

        <li class="mdui-subheader">医院基础信息管理</li>
        <li class="mdui-list-item mdui-ripple" onclick="window.location='${pageContext.request.contextPath}/Main_Office'">
            <i class="mdui-list-item-icon mdui-icon material-icons">drafts</i>
            <div class="mdui-list-item-content">科室信息管理</div>
        </li>
        <li class="mdui-list-item mdui-ripple" onclick="window.location='${pageContext.request.contextPath}/admin/indentPage.jsp'">
            <i class="mdui-list-item-icon mdui-icon material-icons">email</i>
            <div class="mdui-list-item-content">订单信息管理</div>
        </li>

        <li class="mdui-subheader">医院排班信息管理</li>
        <li class="mdui-list-item mdui-ripple" onclick="window.location='${pageContext.request.contextPath}/admin/doctorScheduling.jsp'">
            <i class="mdui-list-item-icon mdui-icon material-icons">&#xe05f;</i>
            <div class="mdui-list-item-content">医生排班管理</div>
        </li>
        <li class="mdui-list-item mdui-ripple" onclick="window.location='${pageContext.request.contextPath}//Main_MZ'">
            <i class="mdui-icon material-icons mdui-list-item-icon">&#xe84f;</i>
            <div class="mdui-list-item-content">门诊管理</div>
        </li>
        <li class="mdui-list-item mdui-ripple" onclick="window.location.href='${pageContext.request.contextPath}/admin/handleApplication.jsp'" href="javascript:void(0);">
            <i class="mdui-icon material-icons mdui-list-item-icon">&#xe85a;</i>
            <div class="mdui-list-item-content">医生申请处理管理</div>
        </li>
        <li class="mdui-list-item mdui-ripple" onclick="window.location.href='${pageContext.request.contextPath}/admin/doctorArrangeCancel.jsp'" href="javascript:void(0);">
            <i class="mdui-list-item-icon mdui-icon material-icons">&#xe5c9;</i>
            <div class="mdui-list-item-content">医生排班变动管理</div>
        </li>
    </ul>
</div>
<%
ksService ksService = new ksService();
List<ksBean> list1 = ksService.browse();
mzService mzService = new mzService();
List<mzBean> list2 = mzService.browse();
%>
	<form action="../Main" id="m">
		<label>选择科室：</label> <select id="ks" name="ks" onclick="ksSelect()">
			<option value="-1" style="display: none;"></option>
			<%
			for (int i = 0; i < list1.size(); i++) {
			%>
			<option value=<%=list1.get(i).getName()%>><%=list1.get(i).getName()%></option>
			<%
			}
			%>
		</select><br> <label>选择门诊：</label> <select id="mz" name="mz"
			onclick="mzSelect()">
			<option value="-1" style="display: none;"></option>
		</select><br><label>选择日期：</label><input type="date" id="date"
			name="date"><br><input type="hidden" name="action"
			value="selectdoctorScheduling" > <input type="submit" value="查询" >
		<input id="r"type="button" value="重置" onclick="reset()">
		<table id="n">

			<thead>
				<tr>
					<th colspan="8">排班情况</th>
				</tr>
				<tr>
					<th style="display: none;">排班编号</th>
					<th>医生编号-姓名</th>
					<th>门诊编号-名称</th>
					<th>日期</th>
					<th>时间</th>
					<th>数量</th>
					<th>修改排班</th>
					<th>取消排班</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
		 <div id="pager" class="pager">
            <a href="javascript:void(0);" id="first-page">首页</a>
            <a href="javascript:void(0);" id="prev-page">上一页</a>
            <a href="javascript:void(0);" id="next-page">下一页</a>
            <a href="javascript:void(0);" id="last-page">末页</a>
            <span>当前第 <span id="current-page">1</span> 页，共 <span id="total-pages">1</span> 页</span>
            <span>每页显示 <select id="page-size">
                <option value="5">5</option>
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select> 条记录</span>
        </div>
	</form>
	<form id="u" action="../Main">
	<div id="ua">
	<div id="ub">
		<label>医生：</label> <input type="text" id="docid" value="" readonly>
			<br> <label>分配门诊：</label> <select id="mz1" name="mz1">
		</select><br> <label>设置日期：</label> <input type="date" id="date1"
			name="date1"><br> <label>设置时间：</label> <select id="time"
			name="time">
			<option value="100">上午</option>
			<option value="010">下午</option>
			<option value="001">晚上</option>
		</select><br> <label>设置挂号总数：</label> <select id="sum" name="sum">
		</select><br> <input type="hidden" name="action"
			value="updateS" /> <input type="text" id="schid1"name="schid1" value="" style="display:none;"><input id="ub1"type="button" value="修改"
			> <input id="ub2"type="button" value="重置"
			>	<input id="ub3"type="button" value="取消">
	</div>
	</div>
	</form>
	<form id="c" action="../Main">
	<div id="ca">
	<div id="cb">
	<h3>确定删除该医生的此次排班吗？</h3>
	<input type="hidden" name="action" value="cancelS"> 
	<input type="text" id="schid"name="schid" value="" style="display:none;">
	<input id="cba"type="submit" value="提交">
	<input id="cbb"type="button" value="取消">
	</div>
	</div>
	</form>
		<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script>
	var x=0;
	function ksSelect() {
		 var mz = document.getElementById("mz");
		  for (var i = mz.children.length - 1; i > 0; i--) {
		    mz.removeChild(mz.children[i]);
		  }
		  x=0;
	}
	function mzSelect() {
		if(x==0){
			var ks = document.getElementById("ks");
			  var mz = document.getElementById("mz");
			  let res=$.ajax({
				  url:"http://localhost:8080/work3/Main",
				  type: "GET",
				  data: {
					  ks:ks.value,
					  action: "getmzs"
				  },
				  async: false,
				  dataType: "text",
				  error: (err)=> {
					  console.log(err);
				  }
			  }) 
			 
			  
			  res.then((result)=>{
				  let resData = JSON.parse(result);
				  for(var i=0;i<resData.mzs.length;i++){
						var option = document.createElement('option');
						option.innerHTML = resData.mzs[i].id+"-"+resData.mzs[i].name;
						option.value = resData.mzs[i].id;
						mz.appendChild(option); 
					}
				  x++;
			  })
			  
			  
		}  
	}
		function reset(){
			var m = document.getElementById("m");
			m.reset();
		}
		<%doctorService doctorService = new doctorService();
		List<doctorSchedulingBean> list = (List<doctorSchedulingBean>)session.getAttribute("ss");
		
		if(list!=null){ 
			out.println("var tableData = [");
		    for (int i = 0; i < list.size(); i++) {
		        doctorSchedulingBean bean = list.get(i);
		        String doctorName = doctorService.getRecord(bean.getDocid()).getName();
		        String mzName = mzService.getRecord(bean.getMzid()).getName();
		        String[] data = {
		            String.format("[%d]", bean.getId()),
		            String.format("'%s-%s'", bean.getDocid(), doctorName),
		            String.format("'%s-%s'", bean.getMzid(), mzName),
		            String.format("'%s'", bean.getDate()),
		            String.format("'%s'", bean.getType()),
		            String.valueOf(bean.getSum())
		        };
		        out.println("[" + String.join(", ", data) + "]");
		        if (i < list.size() - 1) {
		            out.println(",");
		        }
		    }
		    out.println("];");
			
		%>
			var currentPage = 1;
	        var pageSize = 5;

	        function renderTable() {
	            var table = document.getElementById('n');
	            var tbody = table.getElementsByTagName('tbody')[0];
	            tbody.innerHTML = '';

	            var startIndex = (currentPage - 1) * pageSize;
	            var endIndex = Math.min(startIndex + pageSize, tableData.length);

	            for (var i = startIndex; i < endIndex; i++) {
	                var row = document.createElement('tr');
	                row.className = 'table-row';
	                var rowData = tableData[i];

	                for (var j=0;j<rowData.length+2;j++) {
	                    var cell = document.createElement('td');
	                    if(j==0)
	                    	cell.className = 'hidden-column';
	                
	                    if(j<rowData.length){
	                    	if(j==4){
		                    	if(rowData[j]=="100"){
		                    		cell.textContent="上午";
		                    	}else if(rowData[j]=="010"){
		                    		cell.textContent="下午";
		                    	}else{
		                    		cell.textContent="晚上";
		                    	}
		                    }else{
		                    	cell.textContent=rowData[j];
		                    }
	                    }else if(j==rowData.length){
	                    	var button = document.createElement('input');
	                        button.type = 'button';
	                        button.value = '修改';
	                        button.className='btn';
	                        if(new Date(rowData[3]).getTime()<=new Date().getTime()){
	                        	button.disabled=true;
	                        	button.style.backgroundColor="grey";
	                        }
	                        cell.appendChild(button);
	                    }else{
	                    	var button = document.createElement('input');
	                        button.type = 'button';
	                        button.value = '取消';
	                        button.className='btn1';
	                        if(new Date(rowData[3]).getTime()<=new Date().getTime()){
	                        	button.disabled=true;
	                        	button.style.backgroundColor="grey";
	                        }
	                        cell.appendChild(button);
	                    }
						
	                    row.appendChild(cell);
	                }
	                tbody.appendChild(row);
	                }
		        document.querySelectorAll('.btn').forEach(item => {
		        	  item.addEventListener('click', event => {
		        		  var u = document.getElementById('u');
				    	   u.style.display="block";
				    	   var row = event.target.closest(".table-row"); 
				            var cells=row.querySelectorAll("td");
				            var docid = document.getElementById('docid');
				            var mz1 = document.getElementById('mz1');
				            var schid1 = document.getElementById('schid1');
				            schid1.value=cells[0].textContent;
				            docid.value=cells[1].textContent;
				            for (var i = mz1.children.length - 1; i >= 0; i--) {
	    					    mz1.removeChild(mz1.children[i]);
	    				  }
				            var option = document.createElement('option');
							option.innerHTML = cells[1].textContent;
							var z=0;
							while(cells[2].textContent[z]!='-'){
								z++;
							}
							option.value = cells[2].textContent.substring(0,z);
							mz1.appendChild(option); 
				            var y=0;
				            mz1.addEventListener('click', function () {
				            	if(y==0){
				        			var schid = cells[0].textContent;
				        			  let res=$.ajax({
				        				  url:"http://localhost:8080/work3/Main",
				        				  type: "GET",
				        				  data: {
				        					  schid: schid,
				        					  action: "getmzs1"
				        				  },
				        				  async: false,
				        				  dataType: "text",
				        				  error: (err)=> {
				        					  console.log(err);
				        				  }
				        			  }) 
				        			 
				        			  
				        			  res.then((result)=>{
				        				  let resData = JSON.parse(result);
				        				  for (var i = mz1.children.length - 1; i >= 0; i--) {
				        					    mz1.removeChild(mz1.children[i]);
				        				  }
				        				  for(var i=0;i<resData.mzs1.length;i++){
				        						var option = document.createElement('option');
				        						option.innerHTML = resData.mzs1[i].id+"-"+resData.mzs1[i].name;
				        						option.value = resData.mzs1[i].id;
				        						mz1.appendChild(option); 
				        					}
				        				  mz1.value=cells[2].textContent.substring(0,z);
				        				  y++;
				        			  })
				        			  
				        			  
				        		}  
				            });
				            var date1=document.getElementById('date1');
				            date1.value=cells[3].textContent;
				            var time=document.getElementById('time');
				   
				            if(cells[4].textContent=="上午"){
				            	time.value="100";
				            }else if(cells[4].textContent=="下午"){
				            	time.value="010";
				            }else{
				            	time.value="001";
				            }
				            var sum=document.getElementById('sum');
				            sum.value=cells[5].textContent;
				            var ub1=document.getElementById('ub1');
				            var ub2=document.getElementById('ub2');
				            var ub3=document.getElementById('ub3');
				            ub3.addEventListener('click', function () {
						    	   u.style.display="none";
						        });
				            ub2.addEventListener('click',function(){
				    		   var docid = document.getElementById('docid');
					            var mz1 = document.getElementById('mz1');
					            docid.value=cells[1].textContent;
					            for (var i = mz1.children.length - 1; i >= 0; i--) {
		    					    mz1.removeChild(mz1.children[i]);
		    				  }
					            var option = document.createElement('option');
								option.innerHTML = cells[2].textContent;
								var z=0;
								while(cells[2].textContent[z]!='-'){
									z++;
								}
								option.value = cells[2].textContent.substring(0,z);
								mz1.appendChild(option); 
					            var y=0;
					            mz1.addEventListener('click', function () {
					            	if(y==0){
					        			var schid = cells[0].textContent;
					        			  let res=$.ajax({
					        				  url:"http://localhost:8080/work3/Main",
					        				  type: "GET",
					        				  data: {
					        					  schid: schid,
					        					  action: "getmzs1"
					        				  },
					        				  async: false,
					        				  dataType: "text",
					        				  error: (err)=> {
					        					  console.log(err);
					        				  }
					        			  }) 
					        			 
					        			  
					        			  res.then((result)=>{
					        				  let resData = JSON.parse(result);
					        				  for (var i = mz1.children.length - 1; i >= 0; i--) {
					        					    mz1.removeChild(mz1.children[i]);
					        				  }
					        				  for(var i=0;i<resData.mzs1.length;i++){
					        						var option = document.createElement('option');
					        						option.innerHTML = resData.mzs1[i].id+"-"+resData.mzs1[i].name;
					        						option.value = resData.mzs1[i].id;
					        						mz1.appendChild(option); 
					        					}
					        				  mz1.value=cells[2].textContent.substring(0,z);
					        				  y++;
					        			  })
					        			  
					        			  
					        		}  
					            });
					            var date1=document.getElementById('date1');
					            date1.value=cells[3].textContent;
					            var time=document.getElementById('time');
					   
					            if(cells[4].textContent=="上午"){
					            	time.value="100";
					            }else if(cells[4].textContent=="下午"){
					            	time.value="010";
					            }else{
					            	time.value="001";
					            }
					            var sum=document.getElementById('sum');
					            sum.value=cells[5].textContent;
					            var ub1=document.getElementById('ub1');
					            var ub2=document.getElementById('ub2');
					            var ub3=document.getElementById('ub3');
					            ub3.addEventListener('click', function () {
							    	   u.style.display="none";
							        });
				        	  });
				            ub1.addEventListener('click', function () {
						    	   u.submit();
						    	   alert("修改成功");
						     });
		        	  })
				    	   
			            
			            
		        	});
				document.querySelectorAll('.btn1').forEach(item => {
	  item.addEventListener('click', event => {
		  var c = document.getElementById('c');
		   c.style.display="block";
		   var row = event.target.closest(".table-row");
	      var cba = document.getElementById('cba');
	      var cbb = document.getElementById('cbb');
	      cba.addEventListener('click', function () {
	           var cells=row.querySelectorAll("td");
	           var schid = document.getElementById('schid');
	           schid.value=cells[0].textContent;
	         	alert("取消成功");
	       });

	      cbb.addEventListener('click', function () {
	   	   var c = document.getElementById('c');
	   	   c.style.display="none";
	       });
	  })
	});
		        
		    var sum = document.getElementById("sum");
		   	for(var i=1;i<=100;i++){
		   		var option = document.createElement('option');
		   		option.innerHTML = i;
		   		option.value = i;
		   		sum.appendChild(option); 
		   	}
		   	var today = new Date();
		   	  today.setDate(today.getDate() + 1);  // 获取明天的日期
		   	  var dd = String(today.getDate()).padStart(2, '0');
		   	  var mm = String(today.getMonth() + 1).padStart(2, '0');  // 一月是 0
		   	  var yyyy = today.getFullYear();

		   	  var minDate = yyyy + '-' + mm + '-' + dd;
		   	  var dateInput = document.getElementById("date1");
		   	  dateInput.min = minDate;
	        }

	        function renderPager() {
	            var pager = document.getElementById('pager');
	            var currentPageSpan = document.getElementById('current-page');
	            var totalPageSpan = document.getElementById('total-pages');
	            var firstPageLink = document.getElementById('first-page');
	            var prevPageLink = document.getElementById('prev-page');
	            var nextPageLink = document.getElementById('next-page');
	            var lastPageLink = document.getElementById('last-page');

	            var totalPages = Math.ceil(tableData.length / pageSize);
	            currentPage = Math.min(currentPage, totalPages);
	            currentPageSpan.textContent = currentPage;
	            totalPageSpan.textContent = totalPages;

	            if (currentPage === 1) {
	                firstPageLink.style.display = 'none';
	                prevPageLink.style.display = 'none';
	            } else {
	                firstPageLink.style.display = 'inline-block';
	                prevPageLink.style.display = 'inline-block';
	            }

	            if (currentPage === totalPages) {
	                nextPageLink.style.display = 'none';
	                lastPageLink.style.display = 'none';
	            } else {
	                nextPageLink.style.display = 'inline-block';
	                lastPageLink.style.display = 'inline-block';
	            }
	        }

	        function updateTable() {
	            renderTable();
	            renderPager();
	        }

	        function onPageChange(page) {
	            currentPage = page;
	            updateTable();
	        }

	        function onPageSizeChange(size) {
	            pageSize = size;
	            currentPage = 1;
	            updateTable();
	        }

	        var firstPageLink = document.getElementById('first-page');
	        var prevPageLink = document.getElementById('prev-page');
	        var nextPageLink = document.getElementById('next-page');
	        var lastPageLink = document.getElementById('last-page');
	        var pageSizeSelect = document.getElementById('page-size');

	        firstPageLink.addEventListener('click', function () {
	            onPageChange(1);
	        });

	        prevPageLink.addEventListener('click', function () {
	            onPageChange(currentPage - 1);
	        });

	        nextPageLink.addEventListener('click', function () {
	            onPageChange(currentPage + 1);
	        });

	        lastPageLink.addEventListener('click', function () {
	            onPageChange(Math.ceil(tableData.length / pageSize));
	        });

	        pageSizeSelect.addEventListener('change', function () {
	            onPageSizeChange(parseInt(pageSizeSelect.value));
	        });

	        updateTable();
	       
		<%}
		session.removeAttribute("ss");
		%>
		
</script>
<script src="https://unpkg.com/mdui@1.0.2/dist/js/mdui.min.js"></script>
<script>
    var $ = mdui.$;
    var inst = new mdui.Drawer('#drawer');
    $('#toggle').on('click', function () {
        inst.toggle();
    });
</script>
</body>
</html>